<script>
import AppFooter from '@/components/layouts/AppFooter.vue';
import { NavBar, Popover } from 'vant';
import { mapStores } from 'pinia'
import { useAppStore } from '@/stores/app';
import { tabbarPaths } from '@/router/tabbar';
import { initCall } from '@/chat/call';
import useContactsStore from '@/stores/contacts';
import { statusBarHeight } from '@/uni';

export default {
  components: {
    AppFooter,
    NavBar,
    Popover
  },
  computed: {
    ...mapStores(useAppStore, useContactsStore),
    isTabbarView() {
      return tabbarPaths.includes(this.$route.path)
    },
    hiddenNavbar() {
      return this.$route.meta?.hiddenNavbar
    },
    navbarRightText() {
      return typeof this.$route.meta?.navbarRightText === 'function'
        ? this.$route.meta.navbarRightText({ route: this.$route })
        : this.$route.meta?.navbarRightText
    },
    navbarRightPath() {
      return this.$route.meta?.navbarRightPath
    },
    navbarRightMenu() {
      return this.$route.meta?.navbarRightMenu ?? []
    }
  },
  data() {
    return {
      popperInstance: null,
      showMenu: false
    };
  },
  created() {
    statusBarHeight()

    initCall()
    this.contactsStore.init()
    if (window.BSL) {
      window.playNotice = this.appStore.playNotice.bind(this.appStore)
      BSL?.JPushTag(this.appStore.userInfo.username, 'playNotice')
    }

    document.addEventListener('click', () => {
      this.appStore.playNotice(true)
    })

    this.timer = setInterval(() => {
      this.appStore.refreshSessionList()
      this.contactsStore.refreshNewFriends()
    }, 10000);
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    handleRightClick() {
      if (this.navbarRightPath && this.navbarRightText) {
        if (typeof this.navbarRightPath === 'function') {
          this.$router.push(this.navbarRightPath({ route: this.$route }))
        } else {
          this.$router.push(this.navbarRightPath)
        }
      }
    },
    handleSelect({ path }) {
      this.$router.push(path)
    }
  },
}
</script>

<template>
  <div class="layout-authorized" :class="{ 'safe-area-top': !hiddenNavbar }">
    <header v-show="!hiddenNavbar" class="header">
      <NavBar
        :title="appStore.title"
        :border="false"
        :left-arrow="!isTabbarView"
        @click-right="handleRightClick"
        @click-left="$router.back()"
      >
        <template #right>
          <Popover
            v-if="navbarRightMenu.length"
            v-model="showMenu"
            trigger="click"
            placement="bottom-end"
            :actions="navbarRightMenu"
            @select="handleSelect"
          >
            <template #reference>
              <div class="navbar-right">
                {{ navbarRightMenu?.length ? '更多' : navbarRightText }}
              </div>
            </template>
          </Popover>
          <div v-else class="navbar-right">
            {{ navbarRightMenu?.length ? '更多' : navbarRightText }}
          </div>
        </template>
      </NavBar>
    </header>
    
    <main class="main" :style="{
      margin: !isTabbarView || hiddenNavbar ? '0' : '0 10px 15px',
      borderRadius: isTabbarView || hiddenNavbar ? '8px' : '0',
      boxShadow: hiddenNavbar || !isTabbarView ? 'none' : undefined
    }">
      <router-view />
    </main>

    <footer class="footer">
      <AppFooter v-show="isTabbarView" />
      <div v-if="isTabbarView" style="background-color: white;" class="safe-area-bottom"></div>
    </footer>
  </div>
</template>

<style lang="less" scoped>
.layout-authorized {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: linear-gradient(to bottom, #63c178, #67c290 5%, #f3f4f8 15%, #f3f4f8);

  .main {
    flex: 1;
    overflow-y: auto;
    background-color: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  }

  .navbar-right {
    color: white;
  }

  .footer {
    flex-shrink: 0;
  }

  #tooltip {
    display: none;
    background: #333;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
  }

  #tooltip[data-show] {
    display: block;
  }

  #arrow,
  #arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
  }

  #arrow {
    visibility: hidden;
  }

  #arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }

  #tooltip[data-popper-placement^='top'] > #arrow {
    bottom: -4px;
  }

  #tooltip[data-popper-placement^='bottom'] > #arrow {
    top: -4px;
  }

  #tooltip[data-popper-placement^='left'] > #arrow {
    right: -4px;
  }

  #tooltip[data-popper-placement^='right'] > #arrow {
    left: -4px;
  }
}
</style>
